<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="screen-header">
          <div class="header-btn">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="btn-box d-flex">
              <div class="btn-bg" @click='handleClickNav("basicData")' :class="comDom=='basicData'?'active-data':''">基础数据<i class="iconfont icon-xialajiantouxia" v-if="comDom=='basicData'"></i></div>
              <div class="btn-bg" @click='handleClickNav("searchData")' :class="comDom=='searchData'?'active-data':''">查询功能<i class="iconfont icon-xialajiantouxia" v-if="comDom=='searchData'"></i></div>
            </div>
          </div>

          <div class="header-text-box">
            <div class="header-text"></div>
          </div>
          <div class="header-btn">
            <dv-decoration-10 class="dv-dec-10-s" />
            <div class="btn-box d-flex btn-box-s">
              <div class="flex-1 w-0"></div>
              <div class="btn-bg" @click='handleClickNav("warningData")' :class="comDom=='warningData'?'active-data':''">预警信息<i class="iconfont icon-xialajiantouxia" v-if="comDom=='warningData'"></i></div>
              <div class="btn-bg" @click='handleClickNav("logData")' :class="comDom=='logData'?'active-data':''">报警记录<i class="iconfont icon-xialajiantouxia" v-if="comDom=='logData'"></i></div>
              <div class="btn-bg" @click='handleClickNav("historyData")' :class="comDom=='historyData'?'active-data':''">历史记录<i class="iconfont icon-xialajiantouxia" v-if="comDom=='historyData'"></i></div>
            </div>
          </div>
        </div>
        <div class="screen-body">
          <!-- <basicData></basicData> -->
          <components :is="comDom"></components>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";

import basicData from "./basicData.vue"
import searchData from "./searchData.vue"
import logData from "./logData.vue"
import warningData from "./warningData.vue"
import historyData from "./historyData.vue"
export default {
  mixins: [drawMixin],
  components:{
    basicData,
    searchData,
    logData,
    warningData,
    historyData
  },
  data() {
    return {
      comDom:"basicData",
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
    };
  },

  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {

    handleClickNav(val){
      this.comDom = val;
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;

  .bg {
    width: 100%;
    height: 100%;
    // padding: 16px 16px 0 16px;
    background-image: url("../assets/image/bg-1.png");
    background-size: 100% 100%;
    background-position: center center;
  }

  .host-body {
    display:flex;
    flex-direction:column;
    height: 100%;
    .screen-body{
      flex:1;
      height:0;
    }
    .screen-header {
      height: 100px;
      width: 100%;
      background-image: url("../assets/image/title-bg.png");
      background-size: cover;
      background-position: center center;
      margin-bottom:20px;
      display: flex;
      .header-text-box {
        width: 790px;
        display: flex;
        height: 80px;
        align-items: center;
        justify-content: center;
        .header-text {
          width: 283px;
          height: 35px;
          background-image: url("../assets/image/title-text.png");
          background-size: cover;
          background-position: center center;
        }
      }

      .header-btn {
        width: 0;
        flex: 1;
        .btn-box{
          padding: 40px 0 0 20px;
          .btn-bg{
            width: 162px;
            height: 61px;
            background-image: url("../assets/image/btn.png");
            background-size: 100% 100%;
            background-position: center center;
            font-size:20px;
            text-align:center;
            line-height:61px;
            cursor:pointer;

            margin-right: 40px;
            &:hover{
              color: #5CFBFF;
            }
          }
          .active-data{
            color: #5CFBFF;
          }
        }
        .btn-box-s{
          padding-right: 20px;
          .btn-bg{
            margin-left: 40px;
            margin-right: 0;
          }
        }
      }

      .dv-dec-10,
      .dv-dec-10-s {
        width: 100%;
        height: 5px;
      }
      .dv-dec-10-s {
        transform: rotateY(180deg);
      }
    }
  }
}
.icon-xialajiantouxia{
  margin-left: 4px;
}
</style>
